<template>
    <div>
        <NavBar>
            <template v-slot:default>用户中心</template>
        </NavBar>
        <div class="header-info">
            <div class="lift-info"><img src="~assets/images/boy.png" alt=""></div>
            <div class="right-info">
                <div><span>昵称：{{User.name}}</span></div>
                <div><span>登录邮箱:{{User.email}}</span></div>
                <div><span>个性签名：扶我去图书馆!!</span></div>
            </div>
        </div>
        <div class="ul-info">
            <div @click="goTo('/setting')">账号管理 <span><van-icon name="arrow" /></span></div>
            <div @click="goTo('/order')">我的订单 <span><van-icon name="arrow" /></span></div>
            <div @click="goTo('/collect')">我的收藏 <span><van-icon name="arrow" /></span></div>
            <div @click="goTo('/address')">地址管理 <span><van-icon name="arrow" /></span></div>
            <div @click="goTo('/about')">关于我们 <span><van-icon name="arrow" /></span></div>
        </div>
        <div class="usermain">
            <van-button @click="tologout" block round color="red" >退出账号</van-button>
        </div>
    </div>
</template>

<script>
    import {Toast } from 'vant'
    import {logout} from '../../network/user.js'
    import NavBar from "../../components/common/navbar/NavBar";
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {onMounted,reactive,toRefs} from  'vue'
    import {getUser} from "../../network/user";
    export default {
        name: "User",
        components:{
            NavBar
        },
        setup(){
            const router = useRouter();
            const store = useStore()
            //退出登录
            const tologout= () =>{
              logout().then(res=>{
                  if (res.status=='204'){
                      Toast.success('退出成功');
                      //清楚token
                      window.localStorage.setItem('token','');
                      store.commit('setIsLogin',false)
                      setTimeout(()=>{
                          store.dispatch('clearCart')
                          router.push({path:'/Login'})
                      },500)
                  }
              })
            }
            //用户状态管理
            const state =reactive({
                User:{}
            })
            onMounted(()=>{
                getUser().then(res=>{
                    state.User=res;
                    console.log(res);
                })
            })
            //按钮链接
            const goTo=(path,query)=>{
                router.push({path,query}
                )
            }
            return {
                tologout,
                ...toRefs(state),
                goTo
            }
        }
    }
</script>

<style scoped lang="scss">
.usermain{
}
    .header-info{
        width: 100%;
        margin-top: 50px;
        color: white;
        background-color: #00e9a5;
        background-image: linear-gradient(160deg, #00e9a5 0%, #80a4d0 100%);
        border-radius: 15px;
        height:110px ;
        box-shadow: #888888 5px 3px 5px 0;
    }
    .lift-info{
        float: left;
        width: 25%;
        img{
            padding: 15px;
            height: 95px;
            width: 95px;
        }
    }
    .right-info{
        margin-top: 10px;
       float: right;
        height: 100%;
        width: 75%;
        text-align: left;
        div{
            margin: 8px;
        }
    }
    .ul-info{
        text-align: left;
        font-size: 18px;
        div{
            margin: 30px 0px  30px 35px;
            height: 30px;
            span{
                float: right;
              margin-right: 25px;
            }
            }
    }


</style>